<template>
	<view class="content">
		<!-- 图片 -->
		<view class="acivityImg">
			<image :src="imgUrl+data.image" mode='widthFix'></image>
		</view>
		<view class="enroll">
			<!-- 报名信息 -->
			<view class="Info">
				<h2 class="infoTitle">{{data.hdName}}</h2>
				<p>
					<image src="../../static/img/img/time.png" mode="" class="img"></image>
					{{ym}}&nbsp;&nbsp;{{date}}&nbsp;&nbsp;{{startTime}}-{{endTime}}
				</p>
				<p>
					<image src="../../static/img/img/dd.png" mode="" class="img"></image>
					{{data.address}}
				</p>
				<!-- <p class="price">
					<span><i>￥</i>{{data.price}}</span>
					<i class="fx" @click="generatePoster">
						<image src="../../static/img/img/fx.png" mode=""></image>
						<br>生成海报
					</i>
				</p> -->
			</view>
		</view>
		<!-- 当前参与 -->
		<view class="enrollDqcy">
			<view class="enrollTop">
				<span class="title">
					<i></i>
					当前参与({{bmList.length}}/{{data.number}})
				</span>
				<span class="enrollInfo" @click="handleIsShow" v-if="infoList.length>0">查看报名信息</span>
			</view>
			<view class="dqcycontent">
				<ul v-if="infoList.length>0">
					<li v-for='(item,index) in infoList' v-if="index < 5">
						<view class="infoTime">
							<view class="imgHy" v-if="item.grade=='尊贵大会员'">
								<image :src="item.avatar" mode="" v-if="item.avatar"></image><br>
								<image :src="imgUrl+userImg" mode="" v-if="!item.avatar"></image><br>
								<image src="../../static/img/img/svip.png" mode="" class="svip"></image><br>
							</view>
							<view class="imgHy" v-if="item.grade=='普通会员'">
								<image :src="item.avatar" mode="" v-if="item.avatar"></image><br>
								<image :src="imgUrl+userImg" mode="" v-if="!item.avatar"></image><br>
								<image src="../../static/img/img/v.png" mode="" class="vip"></image><br>
							</view>
							<image :src="item.avatar" mode="" v-if="item.grade=='普通用户'&&item.avatar"></image><br>
							<image :src="imgUrl+userImg" mode="" v-if="item.grade=='普通用户'&&!item.avatar"></image><br>
							<view class="infoi" v-if="index==4" @click="handleIsShow">
								...
							</view>
						</view>
					</li>
				</ul>
				<view class="null" v-else>
					<image src="../../static/img/null.png"></image>
					<view>暂无报名</view>
				</view>
			</view>
		</view>
		<view style="background-color: #fff;">
			<image show-menu-by-longpress="true" :src="imgUrl+data.qimage" mode='widthFix' class="ewm" @click="previewImage"></image>
			<view class="caewm">长按二维码扫码进群</view>
		</view>
		<!-- 活动详情 -->
		<view class="hdContent">
			<view class="enrollTop">
				<span class="title">
					<i></i>
					活动详情
				</span>
			</view>
			<!-- <view class="enrollContent" v-html="data.content">
			</view> -->
			<view class="enrollContent">
				<rich-text :nodes="formatRichText(data.content)"></rich-text>
			</view>
		</view>
		<view style="height: 60px;"></view>
		<!-- 底部 -->
		<view class="bottom1">
			<span v-if="data.state==0" class="end">
				已结束
			</span>
			<button class="one" v-if="!token&&data.state==1" @click="login_zheshow">
				我要报名
			</button>
			<span class="one" v-if="token&&data.state==1&&!isBm" @tap="handleBm(data.id)">
				我要报名
			</span>
			<!-- <span class="one" v-if="token&&data.state!==0&&isBm&&data.tkSwitch==0&&noClick" @tap="handlTcbm(data)">
				退出报名
			</span> -->
			<span class="one" v-if="token&&data.state!==0&&isBm&&data.tkSwitch==0&&noClick" @tap="handlTcbmlist(data)">
				退出报名
			</span>
			<span class="one" v-if="token&&data.state!==0&&isBm&&data.tkSwitch==0&&!noClick">
				退出报名
			</span>
			<span class="Tone" v-if="token&&data.state==1&&isBm&&data.tkSwitch==1">
				已停止退款
			</span>
			<span class="Tone" v-if="token&&data.state==2&&isBm&&data.tkSwitch==1">
				已停止退款
			</span>
			<!-- <button @click="login_zheshow">登录</button> -->
			<span v-if="data.state==2&&!isBm" class="end">
				已满员
			</span>
		</view>
		<!-- 报名人数弹窗 -->
		<uni-popup ref="popupXy" type="bottom" border-radius="10px 10px 0 0">
			<view class="popup">
				<!-- 关闭窗口 -->
				<view class="gb">
					<image src="../../static/img/colse.png" mode="" class="colse" @click="colseXy"></image>
				</view>
				<view class="showBox">
					<ul v-if="infoList.length>0">
						<!-- 大会员 -->
						<li v-if="svipList.length>0">
							<view class="hyTop">大会员报名通道</view>
							<view class="showItem" v-for='(item,index) in svipList'>
								<view class="showTopB">
									<view class="imgHy">
										<image :src="item.avatar" mode="" v-if="item.avatar"></image><br>
										<image :src="imgUrl+userImg" mode="" v-if="!item.avatar"></image><br>
										<image src="../../static/img/img/svip.png" mode="" class="svip"></image><br>
									</view>
								</view>
							</view>
						</li>
						<!-- 普通会员 -->
						<li v-if="vipList.length>0">
							<view class="hyTop">普通会员报名通道</view>
							<view class="showItem" v-for='(item,index) in vipList'>
								<view class="showTopB">
									<view class="imgHy">
										<image :src="item.avatar" mode="" v-if="item.avatar"></image><br>
										<image :src="imgUrl+userImg" mode="" v-if="!item.avatar"></image><br>
										<image src="../../static/img/img/v.png" mode="" class="vip"></image><br>
									</view>
								</view>
							</view>
						</li>
						<!-- 普通用户 -->
						<li v-if="ptUserList.length>0">
							<view class="hyTop">普通用户报名通道</view>
							<view class="showItem" v-for='(item,index) in ptUserList'>
								<view class="showTopB">
									<view class="imgHy">
										<!-- {{index}} -->
										<image :src="item.avatar" mode="" v-if="item.avatar"></image><br>
										<image :src="imgUrl+userImg" mode="" v-if="!item.avatar"></image><br>
									</view>
								</view>
							</view>
						</li>
					</ul>
					<view class="null" v-else>
						<image src="../../static/img/null.png"></image>
						<view>暂无报名</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 海报弹窗 -->
		<uni-popup ref="popupHb" type="bottom" border-radius="10px 10px 0 0">
			<view>
				<!-- 海报预览区域 -->
				<!-- <canvas canvas-id="posterCanvas" class="poster-canvas" v-if="showCanvas"></canvas> -->
				<canvas 
				  canvas-id="posterCanvas" 
				  id="posterCanvas"
				  class="poster-canvas"
				  :style="{
				    width: canvasWidth + 'px',
				    height: canvasHeight + 'px'
				  }"
				  v-if="showCanvas"
				></canvas>
				<image :src="posterImage" mode="widthFix" class="poster-image" v-if="posterImage"></image>
				<!-- 保存按钮（生成后显示） -->
				<button @click="savePoster" type="warn" v-if="posterImage">保存海报</button>
			</view>
		</uni-popup>
		<!-- 分开退款弹窗 -->
		<uni-popup ref="fktkPopup" type="bottom" border-radius="10px 10px 0 0" @change="handlePopupClose">
			<view class="fkpopupBox">
				<view class="fkpopupt" v-for='(item,index) in refundlist'>
					<view class="exitName">{{item.name}}</view>
					<view class="exitE"  @click="handlTcbm(item)">退出报名</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		hdDetails,
		loginSave,
		getNumList,
		userInfo,
		getSeachBm,
		getbminfo,
		refundlist
	} from '@/api/api.js'
	import {
		refund,
		getRefundJl
	} from '@/api/pay.js'
	import config from '@/config'
	export default {
		data() {
			return {
				imgUrl: config.baseUrl,
				data: "",
				date: "",
				ym: "",
				startTime: "",
				endTime: "",
				loginData: {},
				zheshow: false, // 控制弹窗显示隐藏
				phone: "",
				token: "",
				Isshow: false,
				hdInfo: {},
				bmList: [],
				infoList: [],
				phone: "",
				isBm: false,
				id: "",
				userImg: "/default/USER_DEFAULT_AVATAR_URL.png",
				info: {},
				ptUserList: [],
				vipList: [],
				svipList: [],
				noClick: true,
				showCanvas: false,
				posterImage: '',
				canvasWidth: 300,
				canvasHeight: 500,
				phone1 :"",
				// 付款手机号下的列表
				refundlist:[]

			}
		},
		onLoad(options) {
			console.log('optionsoptionsoptionsoptions',options)
			let that = this
			that.id = options.id,
			that.phone1 = options.phone
			that.getDetails(options.id)
			that.getbmList(options.id);
			uni.getStorage({
				key: 'data1',
				success: function(res) {
					that.token = res.data.token
					that.seachBm(options.id)
				}
			});
		},
		methods: {
			// 查看详情
			getDetails(id) {
				hdDetails(id).then((res) => {
					if (res.code == 200) {
						this.data = res.data
						console.log('this.datathis.data', this.data)
						console.log('我要报名', this.data)
						const date = this.data.startTime; // 你可以根据需要更改这个日期
						this.date = this.getChineseWeekday(date);
						this.formatDate(date);
						this.endDate(this.data.endTime)
					}
				})
			},

			// 报名人数列表
			getbmList(id) {
				getNumList(id).then((res) => {
					uni.showLoading({
						title: '加载中...',
					});
					this.hdInfo = res.hdData
					this.bmList = res.data
					this.infoList = res.data
					console.log('this.infoListthis.infoListthis.infoList',this.infoList)
					// 循环遍历头像
					// for (let i = 0; i < res.data.length; i++) {
					// 	// 查询用户信息表中是否有该手机号
					// 	userInfo(res.data[i].phone).then((info) => {
					// 		let avatar = ""
					// 		let grade = ""
					// 		if (info) {
					// 			// this.userInfo = info.info
					// 			if (/^data:image\/\w+;base64/.test(info.info.avatar)) {
					// 				avatar = info.info.avatar
					// 				grade = info.info.grade
					// 			} else if (info.info.avatar == 'undefined' || !info.info.avatar) {
					// 				avatar = this.imgUrl + '/default/USER_DEFAULT_AVATAR_URL.png'
					// 				grade = info.info.grade
					// 			} else {
					// 				avatar = this.imgUrl + info.info.avatar
					// 				grade = info.info.grade
					// 			}
					// 		} else {
					// 			avatar = this.imgUrl + '/default/USER_DEFAULT_AVATAR_URL.png'
					// 			grade = '普通用户'
					// 		}
					// 		let temp = {
					// 			avatar: avatar,
					// 			grade: grade
					// 		}
					// 		this.infoList.push(temp);
					// 		// 遍历一样的值
							let groupedItems = this.infoList.reduce((acc, item) => {
								const key = item.grade;
								if (!acc[key]) {
									acc[key] = [];
								}
								acc[key].push(item);
								return acc;
							}, {});
							if (groupedItems['尊贵大会员'] && groupedItems['尊贵大会员'].length > 0) {
								this.svipList = groupedItems['尊贵大会员']
							}
							if (groupedItems['普通会员'] && groupedItems['普通会员'].length > 0) {
								this.vipList = groupedItems['普通会员']
							}
							if (groupedItems['普通用户'] && groupedItems['普通用户'].length > 0) {
								this.ptUserList = groupedItems['普通用户']
							}
							setTimeout(() => {
								// 这里的代码会在2秒后执行
								uni.hideLoading();
							  }, 3000);
					// 	})
					// }
				})
				
			},

			// 查询是否报名
			seachBm(id) {
				let that = this
				uni.getStorage({
					key: 'data1',
					success: function(res) {
						console.log('resresresres',res)
						that.phone = res.data.phone
						let data = {
							phone: that.phone,
							hid: id
						}
						getSeachBm(data).then((res1) => {
							if (res1.info) {
								that.isBm = true
							} else {
								that.isBm = false
							}
						})
					}
				});
			},

			// 跳转报名详情页
			handleEnroll(id) {
				uni.navigateTo({
					url: '../enroll/list?hid=' + id,
				});
			},

			colse() {
				this.Isshow = false
			},

			// 周几计算
			getChineseWeekday(date) {
				const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				return weekdays[new Date(date).getDay()];
			},
			// 开始时间
			formatDate(date) {
				const dateObj = date instanceof Date ? date : new Date(date);
				const year = dateObj.getFullYear();
				const month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
				const day = dateObj.getDate().toString().padStart(2, '0');
				const hours = dateObj.getHours();
				const minutes = dateObj.getMinutes();
				const seconds = dateObj.getSeconds();
				this.ym = `${month}-${day}`;
				this.startTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
				console.log('111', this.ym)
				console.log('23232', this.startTime)
			},
			// 结束时间
			endDate(date) {
				const dateObj = date instanceof Date ? date : new Date(date);
				const year = dateObj.getFullYear();
				const month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
				const day = dateObj.getDate().toString().padStart(2, '0');
				const hours = dateObj.getHours();
				const minutes = dateObj.getMinutes();
				const seconds = dateObj.getSeconds();
				this.ym = `${month}-${day}`;
				this.endTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
			},

			// 点击跳转我要报名
			handleBm(id) {
				let that = this
				// 活动列表中是否有该用户,如果有同时您已报名否则跳转
				let data = {
					hid:id,
					phone: that.phone
				}
				getbminfo(data).then((res) => {
					if(res.code==200){
						uni.showToast({
							title: '您已报名',
						});
					}else{
						uni.navigateTo({
							url: '/pages/enroll/index?id=' + id+'&phone='+that.phone1
						});
					}
				})
			},
			
			// 退出报名-弹出列表
			handlTcbmlist(item){
				let that = this
				if(that.phone&&this.noClick){
					that.noClick = false;
					// 传活动id和付款人的手机号获取列表
					let data = {
						hdId: item.id,
						zfPhone: that.phone
					}
					refundlist(data).then((res) => {
						this.refundlist = res.data
						if(this.refundlist.length>0){
							that.$refs.fktkPopup.open('center')
						}
					})
				}
			},
			
			// 关闭 弹窗时间】
			handlePopupClose(val){
				console.log('val',val.show)
				if(!val.show){
					this.noClick = true;
				}
				
				console.log('this.noClick',this.noClick)
			},

			// 退出报名（退款）
			handlTcbm(item) {
				console.log('item',item)
				console.log('refundlist',this.refundlist)
				this.noClick = true;
				if(this.refundlist.length>1&&item.isself==1){
					// 无图标提示
					uni.showToast({
					  title: '请先退出其他报名信息',//提示内容
					  icon: 'none',//图标
					  duration: 2000//持续时间
					});
				}else if(this.refundlist.length>0&&item.isself==0||this.refundlist.length==1&&item.isself==1){
					if (this.noClick) {
						this.noClick = false;
						uni.showModal({
							title: '提示',
							content: '确定退出报名？',
							success: function(res) {
								if (res.confirm) {
									uni.showLoading({
										title: '加载中...',
									});
									let data = {
										hdId: item.hid,
										// hdName:item.hdName,
										phone: item.zfPhone,
										name:item.name,
										price:item.price,
										personPrice:item.person_price,
										isself:item.isself
									}
									refund(data).then((res) => {
										uni.hideLoading();
										if (res.result_code == "FAIL") {
											uni.showToast({
												title: "退款失败",
												icon: 'error',
											});
										} else if (res.result_code == "SUCCESS") {
											let jydata = {
												hdId: item.hid,
												hdName: item.hdName,
												payment_phone: item.zfPhone,
												name:item.name,
												personPrice:item.person_price,
												isself:item.isself
											}
											getRefundJl(jydata).then((jyRes) => {
												if (jyRes.code == 200) {
													uni.showToast({
														title: "退款成功",
														icon: 'success',
													});
													setTimeout(() => {
														uni.reLaunch({
															url: '/pages/index/index'
														});
													}, 1000);
												}
											})
										}
									})
								} else {
									console.log('用户点击取消');
								}
							}
						})
						console.log('this.noClick', this.noClick)
						setTimeout(() => {
							this.noClick = true;
							console.log('that.noClick1', this.noClick)
						}, 2000) //时间可以自己定义
					}
				}
			},

			login_zheshow() {
				uni.navigateTo({
					url: '../login/login',
				});
			},

			// 查看信息的弹窗
			handleIsShow(item) {
				this.$refs.popupXy.open('bottom')
			},

			// 关闭弹窗
			colseXy() {
				this.$refs.popupXy.close()
			},

			formatRichText(html) {
				// html 就是你要传进来地富文本参数
				// 去掉img标签里的style、width、height属性
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				// 修改所有style里的width属性为max-width:100%
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				// 去掉<br/>标签
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				// img标签添加style属性：max-width:100%;height:auto
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');
				// 返回 处理后地结果
				return newContent;
			},

		async generatePoster() {
			  try {
				  // 1. 下载图片
				  const downloadResult1 = await uni.downloadFile({
					url: 'https://yeke.fedzhfw.cn/uploads/20250518/b46ffc8bcfd077c1947efe17926f8fd5.jpg'
				  });
				  
				  let downloadResult = downloadResult1[1]
				  
				  if (downloadResult.statusCode !== 200 || !downloadResult.tempFilePath) {
					throw new Error('图片下载失败');
				  }
				  
				  console.log('图片临时路径:', downloadResult.tempFilePath);
				  
				  // 2. 显示canvas
				  this.showCanvas = true;
				  
				  // 3. 确保canvas已渲染
				  await new Promise(resolve => this.$nextTick(resolve));
				  await new Promise(resolve => setTimeout(resolve, 100));
				  
				  // 4. 开始绘制
				  const ctx = uni.createCanvasContext('posterCanvas', this);
				  
				  // 绘制背景（确保颜色设置正确）
				  ctx.setFillStyle('#ffffff'); // 先用红色测试是否可见
				  ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
				  
				  // 绘制图片（添加错误回调）
				  ctx.drawImage(downloadResult.tempFilePath, 20, 50, 260, 260, (err) => {
					if (err) console.error('图片绘制错误:', err);
				  });
				  
				  // 绘制文字（确保位置在canvas范围内）
				  ctx.setFontSize(20);
				  ctx.setFillStyle('#000000');
				  ctx.fillText('测试文字', 50, 30);
				  
				  // 5. 关键步骤：执行绘制
				  ctx.draw(true, () => {
					console.log('绘制完成回调');
					
					// 转换为图片
					uni.canvasToTempFilePath({
					  canvasId: 'posterCanvas',
					  success: (res) => {
						console.log('生成临时文件成功:', res.tempFilePath);
						this.posterImage = res.tempFilePath;
						this.showCanvas = false;
					  },
					  fail: (err) => {
						console.error('生成临时文件失败:', err);
					  }
					}, this);
				  });
				  
				} catch (err) {
				  console.error('生成海报出错:', err);
				  uni.showToast({
					title: '生成失败: ' + err.message,
					icon: 'none'
				  });
				}
				this.$refs.popupHb.open('conter')
			},
    
    savePoster() {
      uni.saveImageToPhotosAlbum({
        filePath: this.posterImage,
        success: () => {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
        },
        fail: () => {
          uni.showToast({
            title: '保存失败',
            icon: 'none'
          })
        }
      })
    },
	
	// 长按二维码进群
	previewImage() {  
		let qImg = this.imgUrl+this.data.qimage
		uni.previewImage({  
			// 需要预览的图片链接列表。若无需预览，可以注释urls  
			// urls: [qImg],  
			// 为当前显示图片的链接/索引值  
			current: qImg,  
			// 图片指示器样式    
			indicator: 'default',  
			// 是否可循环预览  
			loop: false,  
			success: res => {  
				console.log('previewImage res', res);  
			},  
			fail: err => {  
				console.log('previewImage err', err);  
			}  
		});  
	}
		},


	}
</script>

<style>
	/* 报名 */
	.enroll {
		/* border-radius: 50rpx; */
		background: rgba(255, 255, 255, 1);
		/* height: 500rpx; */
		position: relative;
		top: -10rpx;
		padding: 10px;
	}

	.title {
		font-weight: 400;
		color: #6a8473;
	}

	.title i {
		width: 2px;
		height: 19px;
		border-radius: 50px;
		background-color: #6a8473;
		float: left;
		margin-right: 5px;
		margin-top: 1px;
	}

	.enrollDqcy {
		background-color: #fff;
		margin: 5px 0;
		padding-bottom: 10px;
		/* overflow: hidden; */
	}

	.enrollTop {
		display: flex;
		font-size: 15px;
		padding: 10px;
		font-size: 14px;
	}

	.enrollInfo {
		margin-left: auto;
		color: #c8c8c8;
	}

	.img {
		width: 16px;
		height: 16px;
		margin-top: 10px;
		position: relative;
		top: 4px;
		margin-right: 5px;
	}

	.Info p {
		font-size: 26rpx;
		font-weight: 300;
	}

	.infoTitle {
		font-size: 28rpx;
		font-weight: 300;
		padding: 20rpx;
		border-bottom: 1px solid #6a8473;
	}

	.price {
		display: flex;
		margin-top: 5px;
	}

	.price span {
		font-weight: 300;
		font-size: 33rpx;
		color: #6a8473;
	}

	.price span i {
		font-size: 14px;
		float: left;
		margin-top: 2px;
	}

	.price .fx {
		margin-left: auto;
		margin-top: -2px;
		text-align: center;
		font-size: 12px;
		color: #8a8a8a;
	}

	.price image {
		width: 16px;
		height: 16px;
	}

	.dqcycontent ul li image {
		border-radius: 50%;
		width: 110rpx;
		height: 110rpx;
	}

	.dqcycontent ul li i {
		color: #909090;
		font-size: 12px;
	}

	.dqcycontent ul {
		display: flex;
	}

	.dqcycontent ul li {
		margin: 0 9px;
		text-align: center;
		position: relative;
	}

	.hdContent {
		background-color: #FFFFFF;
		margin-top: 5px;
		padding-bottom: 10px;
		/* border-bottom: 1px solid #e5e5e5; */
	}

	.enrollContent {
		font-size: 14px;
		padding: 0 25px;
		font-weight: 300;
		line-height: 50rpx;
	}

	.bottom1 {
		background-color: #fff;
		padding: 10px 0;
		margin-top: 20px;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-shadow: 1px 1px 11px #ddd;
		text-align: center;
	}

	.bottom1 span {
		width: 80%;
		background-color: #6a8473;
		color: #fff;
		border: none;
		height: 75rpx;
		line-height: 75rpx;
		font-size: 29rpx;
		display: inline-block;
		text-align: center;
		border-radius: 50rpx;
		margin: 0 auto;
	}

	.end {
		color: #fff;
		background: #ababab !important;
	}

	.acivityImg {
		width: 100%;
		background-color: #fff;
		text-align: center;
	}

	.acivityImg image {
		width: 95%;
		margin: 0 auto;
	}

	.one {
		width: 80%;
		background: #6a8473;
		color: #fff;
		border-radius: 50rpx;
		font-weight: 300;
		font-size: 29rpx;
	}

	.Tone {
		width: 80%;
		background-color: #ddd !important;
		color: #fff !important;
		border-radius: 50rpx;
		font-weight: 300;
		font-size: 29rpx;
	}

	.bmList {
		background: #fff;
		padding: 10px;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		position: fixed;
		bottom: 0;
		width: 94%;
		z-index: 1;
		box-shadow: 1px 1px 9px #ddd;
		height: 400rpx;
		overflow: overlay;
		padding-bottom: 10px;
	}

	.colse {
		width: 16px;
		height: 16px;
		position: absolute;
		right: 15px;
	}

	.infoi {
		width: 110rpx;
		height: 110rpx;
		position: absolute;
		top: 0;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.4);
		color: #fff;
		line-height: 86rpx;
		font-size: 35rpx;
	}

	.showItem {
		width: 20%;
		height: 110rpx;
		text-align: center;
		color: #909090;
		font-size: 14px;
		float: left;
		margin-bottom: 18rpx;
	}

	.hyTop {
		font-size: 28rpx;
		color: #6a8473;
		font-weight: 300;
		border-left: 2px solid #6a8473;
		padding-left: 10rpx;
		margin-bottom: 10rpx;
	}

	.showItem .showTopB {
		width: 110rpx;
		height: 110rpx;
		margin: 0 auto;
	}

	.showItem .showTopB image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.showGrade {
		font-size: 26rpx;
	}

	.showBox {
		margin-top: 15px;
		overflow-y: auto;
		height: 100%;
	}

	.showBox ul li {
		/* float: left; */
		/* margin: 0 7.7px 3px; */
		display: inline-block;
		width: 100%;
	}

	/* .info{
		background: #fff;
		width: 100%;
		position: absolute;
	} */

	.null image {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 5px;
	}

	.null {
		text-align: center;
		font-size: 12px;
		color: #cdcdcd;
	}

	.popup {
		background: #fff;
		height: 560rpx;
		width: 94.5%;
		padding: 20rpx;
	}

	.vue-ref {
		padding-bottom: 0 !important;
	}

	.imgHy {
		width: 110rpx;
		height: 110rpx;
		position: relative;
	}

	.vip {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 58rpx !important;
		height: 26rpx !important;
		border-radius: 0 !important;
	}

	.svip {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 70rpx !important;
		height: 26rpx !important;
		border-radius: 0 !important;
	}
	
	/* .poster-canvas {
	  width: 300px;
	  height: 500px;
	  margin-bottom: 20px;
	} */
	
	.poster-image {
	  width: 100%;
	  margin-bottom: 20px;
	}
	
	.poster-canvas {
	  /* 确保canvas可见 */
	  border: 1px solid red; /* 临时添加边框用于调试 */
	  background-color: #f0f0f0; /* 临时背景色 */
	}
	
	.ewm{
		width: 100%;
	}
	
	.caewm{
		font-size: 27rpx;
		text-align: center;
		color: rbg(136,136,136);
		background-color: #fff;
		padding-bottom: 15rpx;
	}
	
	.fkpopup{
		background: #fff;
		width: 500rpx;
		padding: 20rpx;
		font-size: 26rpx;
		/* border-radius: 20rpx; */
		margin: 0 auto;
		line-height: 47rpx;
		/* text-align: center; */
		font-weight: 300;
	}
	
	.fkpopupt {
		display: flex;
		background-color: #6a8473;
		color: #fff;
		margin-top: 20rpx;
		border-radius: 10rpx;
		font-weight: 300;
		font-size: 24rpx;
		padding: 20rpx;
	}
	
	.noExitE,
	.exitE{
		margin-left: auto;
	}
	
	.fkpopupBox{
		background-color: #fff;
		padding: 35rpx;
		width: 500rpx;
	}
	
	.noExitE{
		color: #ddd;
	}
</style>